<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="example-3">
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
        <button v-on:click="warn('Form cannot be submitted yet.', $event)">
            Submit
        </button>
        <!-- 事件修饰符 -->
        <div v-on:click="doThis">
            <a v-on:click.stop="doThis">事件修饰符stop</a>
        </div>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit="doThis">事件修饰符prevent
            <button>Add</button>
        </form>

        <form v-on:submit.prevent="doThis">事件修饰符prevent
            <button>Add</button>
        </form>
        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div style="width: 300px;height:300px;background-color: aquamarine;" v-on:click.capture="doThis('father')">
            <div style="width: 100px;height:100px;background-color: palegoldenrod;" v-on:click="doThis('son')">
                事件修饰符capture</div>
        </div>
        <br>
        <div style="width: 300px;height:300px;background-color: aquamarine;" v-on:click="doThis('father')">没有capture
            <div style="width: 100px;height:100px;background-color: palegoldenrod;" v-on:click="doThis('son')">
            </div>
        </div>
        <br>
        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div style="width: 300px;height:300px;background-color:pink;">
            <div style="width: 100px;height:100px;background-color: palegoldenrod;" v-on:click.self="doThis('son')">
                事件修饰符capture</div>
        </div>
        <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
        <!-- 而不会等待 `onScroll` 完成  -->
        <!-- 这其中包含 `event.preventDefault()` 的情况 -->
        <div v-on:scroll.passive="doThis('passive')"
            style="width: 300px;height:300px;background-color:pink;overflow-y:scroll">
            <div style="width: 200px;height:400px;background-color:paleturquoise;"></div>
            事件修饰符passive
        </div>
        <!-- 按键修饰符 -->
        <!-- 只有在 `key` 是 `Enter` 时调用 `vm.doThis()` -->
        <input v-on:keyup.enter>
        <!-- 以下我的机型要按fn+PgDn -->
        <input v-on:keyup.page-down="doThis('onPageDown')">
        <input v-on:keyup.down="doThis('onPenterageDown')">
        <input v-on:keyup.32="doThis('32')">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // console.log(Vue.config.keyCodes);
        // 这个别名也没生效
        Vue.config.keyCodes.space = 32
        // 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
        new Vue({
            el: '#example-3',
            methods: {
                say: function (message) {
                    alert(message)
                },
                warn: function (message, event) {
                    // 现在我们可以访问原生事件对象
                    if (event) {
                        event.preventDefault();
                        alert(event.target.tagName);

                    }
                    alert(message)
                },
                doThis: function (e) {
                    console.log(e)
                }
            }
        })

    </script>
</body>

</html>